<script>
export default {
  name: "Breadcrumb",
  props: {
    option: {
      type: Object,
      default: () => {},
      required: true,
    },
  },
  computed: {
    UserType() {
      return this.$store.state.userType;
    },
  },
}
</script>

<template>
 <div class="breadcrumb">
   <el-breadcrumb separator="/">
     <el-breadcrumb-item class="main-right-breadcrumb-text">{{ UserType }}</el-breadcrumb-item>
     <el-breadcrumb-item v-for="(item, index) in option" :key="index" class="main-right-breadcrumb-text">
       {{ item }}
     </el-breadcrumb-item>   </el-breadcrumb>
 </div>
</template>

<style scoped>
.breadcrumb {
  height: 100%;
  display: flex;
  align-items: center;
  background-color: white;
  padding-left: 30px;
}
.main-right-breadcrumb-text {
  font-weight: 600;
  font-size: 24px;
}
</style>